<template>
  <el-dialog :visible.sync="editVal" title="拾取坐标" center width="50%">
    <canvas-position ref="canvas" :points="points" :img="img" :width="canvansW" :height="canvansH" @change="_canvasPosition"/>
    <el-button type="primary" size="small" @click="edit()">确认修改</el-button>
  </el-dialog>
</template>

<script>
import { editPosition } from '@/api/position'
import CanvasPosition from '@/components/CanvasPosition'
export default {
  components: {
    CanvasPosition
  },
  props: ['id', 'line', 'editShow', 'width'],
  data() {
    return {
      img: 'http://jiwei-file.taoroot.com/dgx.png',
      x: null,
      y: null,
      canvansW: '800px',
      canvansH: '500px',
      points: []
    }
  },
  computed: {
    editVal: {
      get() {
        return this.editShow
      },
      set() {
        this.$emit('update:editShow', false)
      }
    }
  },
  mounted () {
    this.init()
    this.canvansW = `${this.width}px`;
    this.canvansH = `${this.width * 5 / 8}px`;
  },
  methods: {
    /*初始化点*/
    init () {
      if (this.line.lng && this.line.lat) {
        this.points.push({
          id: this.id,
          x: this.width / 800 * this.line.lng,
          y: this.width / 800 * this.line.lat,
          type: this.line.type
        })
      }

    },
    _canvasPosition(x, y) {
      this.points = []
      this.x = x
      this.y = y
    },
    /*_getPoint (point) {
      console.log(point)
      this.current = point
    },*/
    /*确认修改*/
    edit () {
      if (this.x && this.y) {
        editPosition({ id: this.id, lat: this.y, lng: this.x }).then(res => {
          if (res.ok) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$emit('update:editShow', false)
            this.$parent.$parent.fetchData()
          }
        })
      } else {
        this.$message.error('请选择次设备的坐标点');
      }
    }
  }
}
</script>
